<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    size="small"
                    :inline="true"
                    label-width="68px"
                >
                    <el-form-item
                        label="专病名称"
                        prop="diseaseId"
                    >
                        <el-select
                            v-model="queryParams.diseaseId"
                            placeholder="请选择专病名称"
                            style="width: 240px"
                        >
                            <el-option
                                v-for="dict in dict.type.sys_manage_diseases"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker
                            v-model="dateRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                        >搜索</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">
                <div
                    id="mainCircle"
                    style="width: 600px;height:400px;"
                ></div>
            </el-col>
            <el-col :span="12">
                <div
                    id="mainBar"
                    style="width: 600px;height:400px;"
                ></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from "echarts";
const mainCircleOption = {
    title: {
        text: "构成分布",
    },
    tooltip: {
        trigger: "item",
    },
    legend: {
        top: "5%",
        left: "center",
    },
    series: [
        {
            type: "pie",
            radius: ["40%", "70%"],
            data: [
                { value: 1048, name: "男" },
                { value: 735, name: "女" },
            ],
        },
    ],
};
const mainBarOption = {
    legend: {},
    tooltip: {},
    dataset: {
        dimensions: ["product", "男", "女", "合计"],
        source: [
            { product: "10", 男: 43, 女: 85, 合计: 93 },
            { product: "20", 男: 83, 女: 73, 合计: 55 },
            { product: "30", 男: 86, 女: 65, 合计: 82 },
            { product: "40", 男: 72, 女: 53, 合计: 39 },
        ],
    },
    xAxis: { type: "category" },
    yAxis: {},
    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
};
export default {
    name: "compositionDistribution",
    dicts: ["sys_manage_diseases"],
    data() {
        return {
            // 日期范围
            dateRange: [],
            queryParams: { diseaseId: undefined },
        };
    },
    mounted() {
        var myCircleChart = echarts.init(document.getElementById("mainCircle"));
        myCircleChart.setOption(mainCircleOption);
        var myBarChart = echarts.init(document.getElementById("mainBar"));
        myBarChart.setOption(mainBarOption);
    },
    methods: {
        /**查询按钮 */
        handleQuery() {
            var myChart = echarts.init(document.getElementById("main"));
            myChart.setOption(mainChartOption);
        },
    },
};
</script>

<style>
</style>